<template>
	<view class="wcgd">
		<u-navbar back-text="返回我的"></u-navbar>


		<view class="content">
			<view style="background: #fff;    position: fixed;    width: 100%;    z-index: 2002;">
				<view style="top: 26rpx;color:#f99236;float:  left;left: 20px;position: relative;">{{value}}</view>
				<u-dropdown ref="uDropdown" @open="open" @close="close" duration="10">
					<u-dropdown-item title="筛选">
						<view class="slot-content" style="background-color: #FFFFFF;">
							<scroll-view scroll-y="true" style="height: 80vh;">
								<view v-for="(item,index) in options2" :key="index">
									<u-cell-item :title="item.label" :arrow="false" @click="closeDropdown(item)">
									</u-cell-item>
								</view>


							</scroll-view>
							<!-- 	<u-button type="primary" @click="closeDropdown">确定</u-button> -->
						</view>
					</u-dropdown-item>
				</u-dropdown>
			</view>
			<view class="listclass" :style="{zIndex:zindex}">
				<view v-if="list.length > 0">
					<view class="vis" style="margin-bottom: 10px;" v-for="(item,index) in list" :key="index"
						@click="Toblwc(item)">
						<view>
							<span style="float: left;display: flex;align-items: center;">
								<span>
									{{item.orderNo}}&nbsp;&nbsp;{{item.deptName}}
								</span>
								<u-tag text="完成" mode="dark" bg-color="#4a9add" color="#fff" border-color="#4a9add"
									style="margin-left: 10rpx;" />
							</span>



							<i class="iconfont icon-yuanxingdecircular223" v-if="item.delayFlag==2"
								style="float: right;color: #f42d2d;font-size: 40rpx;"></i>
							<i class="iconfont icon-shalou" v-if="item.delayFlag==1"
								style="float: right;color: #2c6ee5;font-size: 40rpx;padding: 0 7px;"></i>
						</view>
						<view style="padding-top: 60rpx;">
							<i class="iconfont icon-dingwei"
								style="font-size: 36rpx;padding-right: 7px;float: left;color: #9e9e9e;"></i>
							<view style="float: left;padding-top: 2px;">{{item.startAddress}} - {{item.endAddress}}
							</view>
						</view>
						<view style="padding-top: 60rpx;">
							<i class="iconfont icon-shijian"
								style="font-size: 36rpx;padding-right: 7px;float: left;color: #9e9e9e;"></i>
							<view style="float: left;padding-top: 2px;">时限：{{item.timeLimit}}
							<u-button  type="primary" :custom-style="customStyle" @click="buchong(item)" style="float: right;right: 20px;position: absolute;" size="mini">补充</u-button>
							</view>
						</view>
					</view>
				</view>    
				<u-empty v-else mode="list"></u-empty>
			</view>

		</view>


	</view>
</template>

<script>
	import {
		OrderList
	} from "@/pages/api/api"
	export default {
		data() {
			return {
				zindex: 2002,
				value: "一月",
				list: [],
				options2: [{
						label: '一月',
						value: "01",
					},
					{
						label: '二月',
						value: "02",
					}, {
						label: '三月',
						value: "03",
					}, {
						label: '四月',
						value: "04",
					}, {
						label: '五月',
						value: "05",
					}, {
						label: '六月',
						value: "06",
					}, {
						label: '七月',
						value: "07",
					}, {
						label: '八月',
						value: "08",
					}, {
						label: '九月',
						value: "09",
					},
					{
						label: '十月',
						value: "10",
					}, {
						label: '十一月',
						value: "11",
					}, {
						label: '十二月',
						value: "12",
					},
				],
				
				customStyle:{
					backgroundColor: '#4a9add'
					
				}
			};
		},
		onLoad() {
			var myDate = new Date();
			let getMonth = myDate.getMonth() + 1;
			if (getMonth < 9) {
				getMonth = '0' + getMonth
			}
			let a = this.options2.find(v => {
				return v.value == getMonth
			})
			this.value = a.label
			console.log(getMonth, a)
			this.request(getMonth)

		},
		methods: {
			open() {
				this.zindex = 0;
			},
			close() {
				this.zindex = 2002;
			},
			request(num) {
				var date = new Date();
				OrderList({
					orderState: 50,
					sendBy: uni.getStorageSync('userId'),
					year: date.getFullYear(),
					month: num,
					pageNum: 1,
					pageSize: 50
				}).then(res => {
					console.log(num, res)
					if (res.code == 200) this.list = res.rows
				})
			},
			closeDropdown(item) {
				this.$refs.uDropdown.close();
				this.value = item.label;
				this.request(item.value)
				// console.log(item.value)
			},
			Toblwc(item) {
				uni.navigateTo({
					url: "../home/blwc?id=5&onjs=" + JSON.stringify(item)
				});
			
			},
			buchong(item){
				//补充内容
					uni.navigateTo({
						url: "../home/blwc?id=6&onjs=" + JSON.stringify(item)
					});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wcgd /deep/ .u-flex {
		right: 20px;
		position: absolute;
	}

	.vis {
		height: 200rpx;
		background: #fff;
		border-radius: 5px;
		margin: 10px;
		padding: 10px;

	}

	.listclass {
		overflow: scroll;
		height: calc(100% - 17vh);
		position: fixed;
		width: 100%;
		margin-top: 80rpx;
		background: #f4f4f4;
	}

	.content {
		overflow: scroll;
		height: 100vh;
		position: absolute;
		width: 100%;
	}

	.wcgd /deep/ .u-size-default {
		padding: 5rpx 11rpx !important;
	}

</style>
